<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Profits</title>

    <link href="https://fonts.googleapis.com/css?family=PT+Serif|Open+Sans" rel="stylesheet">
    <!--<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">-->
    <link href="styles/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="scss/utils/Main.css">
    <link rel="stylesheet" href="scss/utils/Admin.css">

</head>
<body class="has-admin-nav has-admin-aside has-admin-footer">
<main role="main">
    <section class="admin-navbar">
        <div class="container">
            <ul class="nav nav-pills" role="tablist">
                <li role="presentation"><a href="AdminIndex.html">Campaigns</a></li>
                <li role="presentation"><a href="AdminStats.html">Stats</a></li>
                <li role="presentation"><a href="AdminStores.html">Stores</a></li>
                <li role="presentation" class="active"><a href="AdminProfits.html">Profits</a></li>
                <li role="presentation"><a href="AdminSettings.html">Settings</a></li>
                <li role="presentation"><a href="AdminSubaccounts.html">Subaccounts</a></li>
                <li role="presentation"><a href="AdminCoupons.html">Coupons</a></li>
            </ul>
        </div>
    </section>

    <section class="admin-content admin-content-header">
        <div class="container">
           <div class="box">
               <h2 class="PTSerif">Profits</h2>
               <h3>Figures based on June 13, 2017 at 10:33 AM GMT+08:00</h3>
           </div>
        </div>
    </section>

    <section class="admin-content">
        <div class="container">
            <ul class="box list-unstyled nav-justified text-center" style="padding:45px 0 50px;margin-bottom: 0;">
                <li class="popover-list" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Total profit for all campaigns on your account. This includes real-time profit from live campaigns that are not yet eliglble to be withdrawn.">
                    <div class="font-rem-2-4">Real Time</div>
                    <h2>$9999.00</h2>
                </li>
                <li class="popover-list" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Profits that have been already withdrawn to your Paypal, Payoneer, or bank account.">
                    <div class="font-rem-2-4">Withdrawn</div>
                    <h2>$9999.00</h2>
                </li>
                <li class="popover-list" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Total profit of campaigns that have ended, but are not yet available to withdraw. Profits will remain pending for either 5 days (normal accounts) or 1 hour (VIP accounts) before moving to the Available tab.">
                    <div class="font-rem-2-4">Pending</div>
                    <h2>$9999.00</h2>
                </li>
                <li class="popover-list" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Total profits that are available to be withdrawn now.">
                    <div class="font-rem-2-4">Available</div>
                    <h2>$9999.00</h2>
                </li>
            </ul>
        </div>
    </section>

    <section class="admin-content section-table">
        <div class="container">
            <div class="box">
                <div class="navbar navbar-fill-center">
                    <ul class="nav navbar-nav" role="tablist">
                        <li role="presentation" class="active"><a href="#ap_campaignProfits" role="tab" data-toggle="tab" aria-controls="ap_campaignProfits">Campaign Profits</a></li>
                        <li role="presentation"><a href="#ap_referralCredits" role="tab" data-toggle="tab" aria-controls="ap_referralCredits">Referral Credits</a></li>
                        <li role="presentation"><a href="#ap_withdrawals" role="tab" data-toggle="tab" aria-controls="ap_withdrawals">Withdrawals</a></li>
                    </ul>
                </div>

                <div class="tab-content">
                    <div class="tab-pane fade in active" id="ap_campaignProfits">
                        <div class="clearfix division section-table-header">
                            <div class="col-sm-6 division-item" style="padding-left: 20px;">
                                Total:0
                            </div>
                            <div class="col-sm-4 col-md-3 division-item">
                                <div class="dropdown dropdown-right dropdown-select">
                                    <div class="clearfix dropdown-toggle"  id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                        <span>Sort:</span>
                                        <button class="btn btn-clean font-rem-1-6" type="button">
                                            End date
                                        </button>
                                        <i class="fa fa-navicon fr color-pink"></i>
                                    </div>

                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                        <li><a href="#" data-value="end_date">End date</a></li>
                                        <li><a href="#" data-value="start_date">Start date</a></li>
                                        <li><a href="#" data-value="total_sold">Total sold</a></li>
                                        <li><a href="#" data-value="total_profit">Total profit</a></li>
                                    </ul>
                                </div>

                            </div>
                            <div class="col-sm-3">
                                <form action="" class="form-inline">
                                    <div class="form-group">
                                        <input type="text" placeholder="Search" class="form-control form-control-clean">
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="tab-pane-body">
                            <!--No campaigns found 没有结果时显示的内容-->
                            <!--<div class="font-rem-2-4 text-center no_found">No campaigns found</div>-->
                            <div class="table-wrapper table-responsive">
                                <table id="campaignProfits_table" class="table"></table>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="ap_referralCredits">
                        <!--No campaigns found 没有结果时显示的内容-->
                        <div class="font-rem-2-4 text-center no_found" style="padding-bottom: 5px;">You currently have no referral credit</div>
                        <h4 class="note text-center font-rem-1-6">Learn about our referral <span class="color-pink">program</span>.</h4>
                        <form action="" style="padding-bottom: 80px;padding-top: 10px;">
                            <div class="form-group text-center">
                                <label class="control-label font-rem-1-6">Referral link:</label>
                                <div style="max-width: 20em;padding-left: 1.5em;display: inline-block">
                                    <input type="url" class="form-control input-lg font-rem-1-6">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="tab-pane fade" id="ap_withdrawals">
                        <div class="clearfix division section-table-header">
                            <div class="col-sm-8 division-item" style="padding-left: 20px;">
                                Total:0
                            </div>

                            <div class="col-sm-4">
                                <div class="clearfix">
                                    <label class="sr-only">Date</label>
                                    <div class="col-xs-10">
                                        <input type="text" placeholder="Date" id="date" class="form-control form-control-clean" name="date">
                                    </div>
                                    <div class="col-xs-2 text-right" style="line-height: 40px;">
                                        <i class="fa fa-calendar color-pink" data-container="body" data-toggle="popover" data-placement="top" data-content="Date"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--No campaigns found 没有结果时显示的内容-->
                        <div class="font-rem-2-4 text-center no_found">No withdrawals found</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</main>


<script src="lib/jquery.1.12.4.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="lib/jquery-ui-1.10.3.min.js"></script>
<script src="lib/jquery.validate.min.js"></script>
<script src="lib/bootstrap-table.min.js"></script>
<script src="scripts/index.js"></script>
<script>
    $(function($){

        $("#date").datepicker(defaults.datepicker);


        initDropdownSelect({url:"json/null.json",params:{},controlElement:"#table"});
        $("#campaignProfits_table").bootstrapTable({
            url:"json/AdminProfits.json",
            cache:false,
            columns:[{
                field:"campaign_title",
                title:"Campaign Title"
            },{
                field:"url",
                title:"URL"
            },{
                field:"total",
                title:"Total",
                formatter:priceFormatter
            },{
                field:"withdrawn",
                title:"Withdrawn",
                formatter:priceFormatter
            },{
                field:"pending",
                title:"Pending",
                formatter:priceFormatter
            },{
                field:"available",
                title:"Available",
                formatter:priceFormatter
            }]
        })
    })
</script>
</body>
</html>